import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { Bar } from '@ant-design/plots';

const DemoBar = () => {
  const data = [
    {
      label: '国际比赛评委与裁判员数',
      type: '南昌大学',
      value: 34,
    },
    {
      label: '国际比赛评委与裁判员数',
      type: '江西财经大学',
      value: 17,
    },
    {
      label: '国际比赛评委与裁判员数',
      type: '华东交通大学',
      value: 17,
    },
    {
      label: '本领域重要学术会议作报告人数',
      type: '南昌大学',
      value: 12,
    },
    {
      label: '本领域重要学术会议作报告人数',
      type: '江西财经大学',
      value: 7,
    },
    {
      label: '本领域重要学术会议作报告人数',
      type: '华东交通大学',
      value: 21,
    },
    {
      label: '国内外重要学术会议作报告人数',
      type: '南昌大学',
      value: 56,
    },
    {
      label: '国内外重要学术会议作报告人数',
      type: '江西财经大学',
      value: 7,
    },
    {
      label: '国内外重要学术会议作报告人数',
      type: '华东交通大学',
      value: 11,
    },
    {
      label: '国内外重要期刊负责人数',
      type: '南昌大学',
      value: 32,
    },
    {
      label: '国内外重要期刊负责人数',
      type: '江西财经大学',
      value: 27,
    },
    {
      label: '国内外重要期刊负责人数',
      type: '华东交通大学',
      value: 12,
    },
  ];
  const config = {
    data,
    isGroup: true,
    xField: 'value',
    yField: 'label',
    seriesField: 'type',
    marginRatio: 0,
    label: {
      // 可手动配置 label 数据标签位置
      position: 'right',
      // 'left', 'middle', 'right'
      offset: 4,
    },
    barStyle: {
      radius: [2, 2, 0, 0],
    },
    legend: {
      position: 'top-left',
      itemName: {style: {fontSize: 18}},
    },
    yAxis: {
      label: {
        style: {
          fontSize: 16
        }
      }
    },
    xAxis: {
      label: {
        style: {
          fontSize: 16
        }
      }
    },
  };
  return <Bar {...config} />;
};

export default DemoBar
